<!DOCTYPE html>
<html lang="zh_CN" style="font-size: 100px">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <title>hi~</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- <link rel="stylesheet" href="../public/lib/element-ui/element-ui.css" /> -->
    <link rel="stylesheet" href="../public/chat/css/animate.min.css" />
    <link rel="stylesheet" href="../public/chat/css/reset.css" />
    <link rel="stylesheet" href="../public/chat/css/index.css" />
  </head>
  <body>
    <!-- <h1>index-测试页</h1> -->
    <div id="app">
      <div class="top">
        <h1>未来可期诗词讨论聊天室</h1>
      </div>
      <div class="bg" v-loading="loading">
        <!-- msg -->
        <div class="msg-box">
          <!-- ul -->
          <div class="msg-main" id="message" v-if="userFlag">
            <div
              class="msg animate__animated animate__flipInX"
              v-for="(item,index) in messages"
              :key="index"
              :class="item.me?'me':''"
            >
              <template v-if="item.me">
                <span class="msg-content">{{item.content}}</span>
                <i>:</i>
                <span class="msg-name">{{item.name}}</span>
              </template>
              <template v-else>
                <span class="msg-name">{{item.name}}</span>
                <i>:</i>
                <span class="msg-content">{{item.content}}</span>
              </template>
            </div>
          </div>
          <div class="msg-none" v-else>
            <h3>输入昵称查看实时聊天内容</h3>
          </div>
        </div>
        <!-- btn -->
        <div class="btn-box">
          <div class="btn-menu">
            <el-input
              class="user-input"
              placeholder="请输入昵称"
              v-model="user"
              maxlength="15"
              show-word-limit
              :disabled="userFlag"
              @keyup.enter.native="setUser"
            >
              <template slot="prepend"><span>昵称</span></template>
            </el-input>
            <el-button type="primary" @click="setUser" v-if="!userFlag"
              >确定</el-button
            >
            <el-button type="primary" @click="sendMessage" v-if="userFlag"
              >发送</el-button
            >
          </div>
          <div class="btn-main">
            <el-input
              type="textarea"
              :rows="4"
              :placeholder="!userFlag?'请输入昵称后使用':'请输入内容, ctrl+回车发送'"
              v-model="userStr"
              resize="none"
              :disabled="!userFlag"
              @keyup.native="keyUp"
              ref="msg"
            >
            </el-input>
          </div>
        </div>
        <!-- clients -->
        <div class="clients" v-if="userFlag">
          <div class="c-title">在线用户</div>
          <div class="c-ul">
            <div
              class="c-li animate__animated animate__fadeInLeft"
              v-for="(value, key, index) in clients"
              :key="index"
            >
              {{value.name || '--'}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<script src="../public/lib/vue/vue.min.js"></script>
<script src="../public/lib/axios/axios.min.js"></script>
<script src="../public/lib/element-ui/elementui.js"></script>
<script src="../public/chat/js/utils.js"></script>
<script src="../public/chat/js/index.js"></script>
